/*
 * Copyright 2019 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import 'shared/mixins';
@import 'shared/common';
@import 'shared/modal';
@import 'shared/header';
@import 'shared/alert';
@import 'shared/action_buttons';

.data-sharing {
  background:    #fff;
  border-radius: 5px;
  padding:       20px;
  margin:        0 15px 0 15px;
}

.share-box {
  display: flex;
  margin:  30px 0;
}

.show-data {
  margin-left: 30px;
  width:       50%;
}

.updated-by {
  font-size:     12px;
  display:       inline-block;
  border-radius: 5px 5px 0 0;
  font-style:    italic;
  color:         #777;
}

.human-readable-consent {
  font-size:   18px;
  font-weight: 600;
  color:       #919090;
  margin-top:  5px;
  margin-left: 10px;
}

.consent-toggle-wrapper {
  border:        1px solid #ccc;
  width:         50%;
  border-radius: 3px;
  padding:       10px 20px;
}

.consent-toggle {
  display: flex;

  p {
    font-size:    20px;
    font-weight:  600;
    margin-right: 13px;
  }

  .switch-paddle {
    border-radius: 35px;
    margin-top:    1px;
  }

  .switch-paddle:after {
    border-radius: 100% !important; //scss-lint:disable ImportantRule
  }

  input:checked ~ .switch-paddle {
    background: #40b76b;
  }
}

.consent-for-wrapper {
  font-size: 14px;
}

.consent-for {
  margin-bottom: 15px;
  .key:before {
    content:      '-';
    margin-right: 5px;
  }

  .key {
    font-weight:   600;
    padding-right: 10px;
  }
}

.shared-data {
  white-space:      pre;
  background-color: #383838;
  font-size:        13px;
  color:            #fff;
  font-weight:      400;
  padding:          10px 25px;
  font-family:      monaco, serif;
  margin-bottom:    15px;
}

.button-wrapper {
  padding: 10px 0 0 0;

  .update-consent {
    margin: 0 10px 0 0;
  }

  .reset-consent {
    background: #ccc;
    color:      #000;
    margin:     0;

    &:hover, &:focus {
      background: #c1c1c1;
      color:      #000;
    }
  }
}
